/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-upload-grid {
	display: grid;
	grid-template-columns: repeat(var(--pure-upload-grid-columns, 3), 1fr);
	grid-gap: var(--pure-upload-grid-gap, 10px);

	&__item-container {
		background: var(--pure-upload-grid-item-background, var(--pure-background-default));
		border-radius: var(--pure-upload-grid-item-border-radius, var(--pure-radius-default));
		overflow: hidden;
	}

	&__item--file {
		width: 100%;
		height: 100%;
	}

	&__item__cover {
		width: 100%;
		height: 100%;
		display: block;
	}

	&__item__status {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: var(--pure-upload-grid-item-status-background, var(--pure-background-mask));
		color: var(--pure-upload-grid-item-status-color, var(--pure-text-color-invert));
		gap: var(--pure-upload-grid-item-status-gap, 0.85em);

		&__content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		&__icon {
			font-size: var(--pure-upload-grid-item-status-icon-font-size, var(--pure-font-size-large));
			color: var(--pure-upload-grid-item-status-icon-color);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			&--uploading {
				animation: animationPureSpin var(--pure-upload-grid-loading-animation-duration, 1000ms)
					var(--pure-upload-grid-loading-animation-timing-function, linear) 0s infinite;
			}
		}

		&__text {
			font-size: var(--pure-upload-grid-item-status-text-font-size, var(--pure-font-size-small));
			font-weight: var(--pure-upload-grid-item-status-text-font-weight);
		}
	}

	&__item__status--uploading {
		.pure-upload-grid__item__status__content {
			width: 100%;
		}
	}

	&__item__status__progress {
		display: flex;
		flex-direction: var(--pure-upload-grid-item-status-progress-direction, column);
		align-items: center;
		justify-content: center;
		gap: var(--pure-upload-grid-item-status-progress-gap, 6px);
		width: 100%;

		&__progress {
			width: var(--pure-upload-grid-item-status-progress-width, 50%);
			--pure-progress-track-color: var(
				--pure-upload-grid-item-status-progress-track-color,
				rgba(255, 255, 255, 0.6)
			);
			margin: var(--pure-upload-grid-item-status-progress-margin);
		}

		&__text {
			font-size: var(--pure-upload-grid-item-status-progress-text-font-size, var(--pure-font-size-small));
		}
	}

	&__item--button {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--pure-upload-grid-upload-button-color, var(--pure-text-color-placeholder));

		&__icon {
			font-size: var(--pure-upload-grid-upload-button-icon-font-size, 2em);
			font-weight: var(--pure-upload-grid-upload-button-icon-font-weight);
		}

		&__text {
			font-size: var(--pure-upload-grid-upload-button-text-font-size, var(--pure-font-size-small));
			font-weight: var(--pure-upload-grid-upload-button-text-font-weight);
		}
	}
}
